<template>
	<div class="c-p-panel">
		<div class="c-p-data-view">
			<Table stripe border :columns="table.columns" :data="table.data" width="auto"></Table>
		</div>
		<div class="page">
			<Page :total="table.totalsize" :current="searchParams.page + 1" :page-size="searchParams.pagesize" show-sizer show-elevator show-total @on-change="changePage" @on-page-size-change="changePage"></Page>
		</div>
	</div>
</template>

<script>
	import { formatDate } from '@/libs/date-util.js';

	import AdService from '@/services/AdService.js';
	var $adService = AdService();
	
	var $context = null;
	
	var columns = [{
		type: 'index',
		width: 60,
		fixed: 'left',
		align: 'center'
	}, {
		title: '标题',
		key: 'title',
		width: 200,
		fixed: 'left'
	}, {
		title: '类型',
		key: 'type',
		fixed: 'left',
		width: 90,
		render: (h, params) => { //广告类型，1：普通广告-跳转html5，2：影人广告-跳转到影人首页，3：新闻
			var type = params.row.type;
			if(type == 1) {
				return "普通广告";
			} else if(type == 2) {
				return "影人广告";
			} else if(type == 3) {
				return "新闻";
			}
		}
	}, {
		title: '图片',
		key: 'img',
		width: 340,
		render: (h, params) => {
			var img = JSON.parse(params.row.img);
			return h('div', [
				h('img', {
					attrs: {
						src: img.url,
						width: 300,
						height: 120,
						style: 'padding: 10px; 0px'
					}
				})
			]);
		}
	}, {
		title: '开始时间',
		key: 'startTime',
		width: 150,
		render: (h, params) => {
			var date = new Date(params.row.startTime);
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
		}
	}, {
		title: '结束时间',
		key: 'endTime',
		width: 150,
		render: (h, params) => {
			var date = new Date(params.row.endTime);
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
		}
	}, {
		title: '创建时间',
		key: 'createTime',
		width: 150,
		render: (h, params) => {
			var date = new Date(params.row.createTime);
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
		}
	}, {
		title: '状态',
		key: 'status',
		width: 70,
		fixed: 'right',
		render: (h, params) => {
			var status = params.row.status;
			if(status == 1) {
				return "显示";
			} else if(status == 2) {
				return "未开始";
			} else if(status == 3) {
				return "已结束";
			} else if(status == 0) {
				return "未发布";
			}
		}
	}, {
		title: '操作',
		key: 'action',
		fixed: 'right',
		width: 80,
		render: (h, params) => {
			var aid = params.row.aid;
			return h('div', [
				h('Button', {
					props: {
						type: 'text',
						size: 'small'
					},
					on: {
						click() {
							$context.$router.push({name: 'adEdit', query: {aid: aid}});
						}
					}
				}, '编辑')
			]);
		}
	}];

	const $data = {
		icon: 'http://on77tknxg.bkt.clouddn.com/b3d3b511b6b04c8f882719d661170e641501999178452',
		searchParams: { //搜索参数
			page: 0,
			pagesize: 20
		},
		table: { //数据结构
			columns: columns,
			data: [],
			totalsize: 0
		}
	};
	var loadData = function() {
		$adService.getAds($data.searchParams.page, $data.searchParams.pagesize)
		.then(function(response) {
			var res = response.data;
			var code = res.rescode;
			if(code == 100) {
				$data.table.data = res.data;
				$data.table.totalsize = res.totalSize;
			}
		}, function(error) {
			console.log(error);
		});
	}
	export default {
		name: 'UserListPage',
		data() {
			return $data;
		},
		methods: {
			toUserSpacePage: function(uid) {
				this.$router.push({
					name: 'userSpace',
					query: {
						uid: uid
					}
				});
			},
			changePage: function(pagesize) {
				this.searchParams.pagesize = pagesize;
				loadData();
			}
		},
		components: {},
		created: function() {
			$context = this;
		},
		mounted: function() {
			var $this = this;

			loadData();
		}
	};
</script>

<style scoped>
	.page {
		text-align: center;
		margin-top: 30px;
	}
</style>